import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import context from './context'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 状态提升: 把多个组件要用的数据,写在他们公共的父组件上面
  state = {
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    id: undefined, // 将id,传递给所有Item组件实例.如果app中id的值和某个Item实例的id相同,则当前Item实例要展示文本框
  }

  componentDidMount() {
    // 订阅
    this.addId = PubSub.subscribe('add', (topic, todoName) => {
      // console.log(todoName);

      const todo = {
        id: Date.now(),
        todoName,
        isDone: false,
      }
      // 不建议直接修改数据,原因后面性能优化再讲
      // this.state.todos.push(todo)
      //建议根据旧数据,创建新数据,然后修改新数据
      const newTodos = [...this.state.todos]
      newTodos.push(todo)
      this.setState({
        todos: newTodos,
      })
    })
    this.updateId = PubSub.subscribe('update', (topic, id) => {
      // 判断数组,遍历过程中,找到要修改的数据,对数据的isDone进行取反.返回一个新数组
      const newTodos = this.state.todos.map((item) => {
        if (item.id === id) item.isDone = !item.isDone
        return item
      })
      this.setState({
        todos: newTodos,
      })
    })
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.addId)
    PubSub.unsubscribe(this.updateId)
  }

  // 删除一条任务
  delTodo = (id) => {
    const newTodos = this.state.todos.filter((item) => item.id !== id)
    this.setState({
      todos: newTodos,
    })
  }

  // 全选按钮的逻辑
  allCheckTodos = (target) => {
    const newTodos = this.state.todos.map((item) => {
      item.isDone = target
      return item
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 清除所有完成项
  clearAllDone = () => {
    const newTodos = this.state.todos.filter((item) => {
      return !item.isDone
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 修改app中记录的id,决定哪个Item要展示编辑的文本框
  updateEditId = (id) => {
    this.setState({
      id,
    })
  }

  // 修改任务名
  editTodoName = (todoName) => {
    // console.log(todoName)
    const newTodos = this.state.todos.map((item) => {
      if (item.id === this.state.id) item.todoName = todoName
      return item
    })
    this.setState({
      todos: newTodos,
      id: undefined,
    })
  }
  render() {
    const { todos, id } = this.state
    localStorage.setItem('todos', JSON.stringify(todos))
    return (
      <context.Provider value={id}>
        <div className="todo-container">
          <div className="todo-wrap">
            <Header></Header>
            {todos.length ? (
              <div>
                <List
                  todos={todos}
                  delTodo={this.delTodo}
                  updateEditId={this.updateEditId}
                  editTodoName={this.editTodoName}
                ></List>
                <Footer
                  todos={todos}
                  allCheckTodos={this.allCheckTodos}
                  clearAllDone={this.clearAllDone}
                ></Footer>
              </div>
            ) : (
              <h1>恭喜您,暂无任务!</h1>
            )}
          </div>
        </div>
      </context.Provider>
    )
  }
}
